import React, {Component} from 'react'
import {View, Text, StyleSheet, Modal, ScrollView, TouchableOpacity, Switch} from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'
import {GetSelectLessonsApi, GetSelectTextbooksApi, GetSelectChaptersApi} from '../../config/api'
import Toast from 'react-native-root-toast/lib/Toast'
import StudentsSelector from '../common/students_selector'
import styles,{BLUE} from '../../config/styles'

class NewHomework extends Component {
    static navigationOptions = ({ navigation }) => {
        if (navigation.state.params != undefined) {
            const {nextStage} = navigation.state.params
            return {
                headerRight: (  <TouchableOpacity
                                    style={{paddingRight: 5}}
                                    onPress={() => nextStage({key: navigation.state.key})}
                                >
                                    <Text style={[styles.header_font]}>
                                        下一步
                                    </Text>   
                                </TouchableOpacity>)
            }
        }
    }

    constructor (props) {
        super(props)
        this.state = {
            objectForSubmit: {
                lesson_teacher_id: null,
                title: "",
                needReply: true,
                needScore: true,
                description: "",
                chapter_id: null,
                students: [],
                attachments: []
            },

            classrooms: [],
            lessonModalVisible: false,
            lessons: [],
            selectedLessonName: '',
            textbookModalVisible: false,
            textbooks: [],
            selectedTextbookName: '',
            chapterModalVisible: false,
            chapters: [],
            selectedChapterName: ''
        }
    }

    componentDidMount () {
        const {navigation} = this.props
        const objectForSubmit = this.state.objectForSubmit
        navigation.setParams({
            nextStage: ((params) => {
                if (objectForSubmit.lesson_teacher_id == null || objectForSubmit.lesson_teacher_id == "") {
                    Toast.show('请选择学科')
                    return
                }

                if (objectForSubmit.students.length == 0) {
                    Toast.show('请选择学生')
                    return
                }
                navigation.navigate('new_homework_stage2', {objectForSubmit: objectForSubmit, ...params})
            })
        })
    }


    //选择学科的弹框
    lessonSelectModal = () => {
        return(
            <View style={{flex: 1}}>
                <Modal
                    animationType={'fade'}
                    visible={this.state.lessonModalVisible}
                    transparent={true}
                    onRequestClose={() => {}}
                    supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
                >
                    <TouchableOpacity
                        style={{flex: 1, justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.5)', padding: 20}} 
                        onPress={() => {this.setState({lessonModalVisible: false})}}
                    >
                        <View style={{backgroundColor: 'white', borderRadius: 20}}>
                            <View style={{alignItems: 'center', padding: 5}}>
                                <Text style={{fontSize: 15}}>请选择学科</Text>
                            </View>
                            <ScrollView style={{borderRadius: 15, height: 220, padding: 20}}>
                                {this.state.lessons.map((lesson, index) => {
                                    return (
                                        <TouchableOpacity key={index} onPress={() => {this.confirmSelectedLesson(lesson)}} style={styles.select_inner_label}>
                                            <Text style={{flex: 1, fontSize: 18}}>{lesson.name}</Text>
                                        </TouchableOpacity>
                                    )
                                })}
                        </ScrollView>                        
                    </View>
                    </TouchableOpacity>
                </Modal>
            </View>
        )
    }

    //选择课本的弹框
    textbookSelectModal = () => {
        return(
            <View style={{flex: 1}}>
                <Modal
                    animationType={'fade'}
                    visible={this.state.textbookModalVisible}
                    transparent={true}
                    onRequestClose={() => {}}     
                >
                    <TouchableOpacity
                        style={{flex: 1, justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.5)', padding: 20}} 
                        onPress={() => {this.setState({textbookModalVisible: false})}}
                    >
                        <View style={{backgroundColor: 'white', borderRadius: 20}}>
                            <View style={{alignItems: 'center', padding: 5}}>
                                <Text style={{fontSize: 15}}>请选择课本</Text>
                            </View>
                            <ScrollView style={{borderRadius: 15, height: 220, padding: 20}}>
                                {this.state.textbooks.map((book, index) => {
                                    return (
                                        <TouchableOpacity key={index} onPress={() => {this.confirmSelectedTextbook(book)}} style={styles.select_inner_label}>
                                            <Text style={{flex: 1, fontSize: 18}}>{book.name}</Text>
                                        </TouchableOpacity>
                                    )
                                })}
                        </ScrollView>                        
                    </View>
                    </TouchableOpacity>
                </Modal>
            </View>
        )
    }

    //章节选择的弹框
    chapterSelectModal = () => {
        return(
            <View style={{flex: 1}}>
                <Modal
                    animationType={'fade'}
                    visible={this.state.chapterModalVisible}
                    transparent={true}
                    onRequestClose={() => {}}     
                >
                    <TouchableOpacity
                        style={{flex: 1, justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.5)', padding: 20}} 
                        onPress={() => {this.setState({chapterModalVisible: false})}}
                    >
                        <View style={{backgroundColor: 'white', borderRadius: 20}}>
                            <View style={{alignItems: 'center', padding: 5}}>
                                <Text style={{fontSize: 15}}>请选择章节</Text>
                            </View>
                            <ScrollView style={{borderRadius: 15, height: 220, padding: 20}}>
                                {this.state.chapters.map((chapter, index) => {
                                    return (
                                        <TouchableOpacity key={index} onPress={() => {this.confirmSelectedChapter(chapter)}} style={styles.select_inner_label}>
                                            <Text style={{flex: 1, fontSize: 18}}>{chapter.name}</Text>
                                        </TouchableOpacity>
                                    )
                                })}
                        </ScrollView>                        
                    </View>
                    </TouchableOpacity>
                </Modal>
            </View>
        )
    }

    //打开选择学科的弹框
    openLessonModal = () => {
        GetSelectLessonsApi().then((data) => {
            if (data.code == 0) {
                this.setState({
                    lessons: data.data,
                    lessonModalVisible: true
                })
            } else {
                Toast.show('网络错误')
            }
        })
    }

    //确认选择的学科
    confirmSelectedLesson = (lesson) => {
        this.state.objectForSubmit.lesson_teacher_id = lesson.id
        this.state.objectForSubmit.students = []
        this.setState({
            lessonModalVisible: false, 
            selectedLessonName: lesson.name, 
            selectedTextbookName: '',
            selectedChapterName: '',
            classrooms: lesson.classrooms
        })
        GetSelectTextbooksApi(lesson.id).then((data) => {
            if (data.code == 0) {
                this.state.textbooks = data.data
            }
        })
    }

    //打开选择课本的弹框
    openTextbookModal = () => {
        if (this.state.selectedLessonName == "") {
            Toast.show('请先选择学科')
            return
        } else {
            this.setState({textbookModalVisible: true})
        }
    }

    //确认选择的课本
    confirmSelectedTextbook = (book) => {
        this.setState({textbookModalVisible: false, selectedTextbookName: book.name, selectedChapterName: ""})
        GetSelectChaptersApi(book.id).then((data) => {
            if (data.code == 0) {
                this.state.chapters = data.data
            }
        })
    }

    //打开章节选择的弹框
    openChapterModal = () => {
        if (this.state.selectedTextbookName == "") {
            Toast.show('请先选择课本')
            return
        } else {
            this.setState({chapterModalVisible: true})
        }
    }

    //确认选择的章节
    confirmSelectedChapter = (chapter) => {
        this.state.chapter_id = chapter.id
        this.setState({
            chapterModalVisible: false,
            selectedChapterName: chapter.name
        })
    }

    //需要评分的开关
    _needScoreSwitch = () => {
        let needScore = this.state.objectForSubmit.needScore
        this.state.objectForSubmit.needScore = !needScore
        this.setState({
            objectForSubmit: this.state.objectForSubmit
        })
    }

    //将选择学生的函数传给子组件
    studentsSelect = (newSelectedStudents) => {
        this.state.objectForSubmit.students = newSelectedStudents
        this.setState({objectForSubmit: this.state.objectForSubmit})
    }

    render () {
        return (
            <ScrollView style={styles.main_body}>
                {this.lessonSelectModal()}
                {this.textbookSelectModal()}
                {this.chapterSelectModal()}

                <View style={styles.view_module_container}>
                    <TouchableOpacity
                        style={[styles.text_content_container, {flexDirection: 'row',justifyContent: 'flex-start', alignItems: 'center'}]}
                        onPress={() => this.openLessonModal()}
                    >
                        <Text style={[styles.text_black, {flex: 1}]}>
                            选择学科:
                        </Text>
                        <Text style={[styles.text_black, {paddingRight: 3}]}>
                            {this.state.selectedLessonName}
                        </Text>
                        <Icon name={'ios-arrow-forward'} size={18} color={'#707070'} />
                    </TouchableOpacity>

                    <TouchableOpacity
                    style={[styles.text_content_container, {flexDirection: 'row',justifyContent: 'flex-start', alignItems: 'center'}]}
                    onPress={() => this.openTextbookModal()}
                >
                        <Text style={[styles.text_black, {flex: 1}]}>
                            选择课本:
                        </Text>
                        <Text style={[styles.text_black, {paddingRight: 3}]}>
                            {this.state.selectedTextbookName}
                        </Text>
                        <Icon name={'ios-arrow-forward'} size={18} color={'#707070'} />
                    </TouchableOpacity>



                    <TouchableOpacity
                        style={[styles.text_content_container, {flexDirection: 'row',justifyContent: 'flex-start', alignItems: 'center'}]}
                        onPress={() => this.openChapterModal()}
                    >
                        <Text style={[styles.text_black, {flex: 1}]}>
                            选择章节:
                        </Text>
                        <Text style={[styles.text_black, {paddingRight: 3}]}>
                            {this.state.selectedChapterName}
                        </Text>
                        <Icon name={'ios-arrow-forward'} size={18} color={'#707070'} />
                    </TouchableOpacity>


                    <View style={[styles.selector_label, {flexDirection: 'row'}]}>
                        <View style={{justifyContent: 'center'}}>
                            <Text style={styles.normal_text}>需要评分</Text>
                        </View>
                        <Switch
                            value={this.state.objectForSubmit.needScore}
                            onValueChange={this._needScoreSwitch}
                            style={{margin: 3}}
                            onTintColor={BLUE}
                        />
                    </View>
                    {
                        this.state.classrooms.length > 0 ?
                            ( <StudentsSelector
                                classrooms={this.state.classrooms}
                                studentsSelect={this.studentsSelect}
                                selectedStudents={this.state.objectForSubmit.students}
                            />) : null
                    }
                </View>
            </ScrollView>
        )
    }
}


export default NewHomework